<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>-->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>图片</title>
    <link rel="stylesheet" href="../../../libs/bootstrap4/css/bootstrap.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <p>

    <h2>圆角图片</h2>
    <p>.rounded 类可以让图片显示圆角效果：</p>
    <img src="http://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304"
         height="236">
    </p>
    <p>
    <h2>椭圆图片</h2>
    <p>.rounded-circle 类可以设置椭圆形图片:</p>
    <img src="http://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
    </p>

    <p>
    <h2>缩略图</h2>
    <p>.img-thumbnail 类用于设置图片缩略图(图片有边框):</p>
    <img src="http://static.runoob.com/images/mix/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
    </p>

    <p>
    <h2>图片对齐方式</h2>
    <p>使用 .float-right 类来设置突破右对齐，使用 .float-left 类设置图片左对齐:</p>
    <img src="http://static.runoob.com/images/mix/paris.jpg" class="float-left">
    <img src="http://static.runoob.com/images/mix/cinqueterre.jpg" class="float-right">
    </p>


    <div style="clear: both;"></div>

        <p>
        <h2>响应式图片</h2>
        <p>.img-fluid 类可以设置响应式图片，重置浏览器大小查看效果:</p>
        <img src="http://static.runoob.com/images/mix/paris.jpg" class="img-fluid">
        </p>
</div>
</body>
</html>